<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        电梯列表-电梯二维码
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../css/main.css" media="all">
    <script type="text/javascript" src="../../../lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="../../../css/bootstrap.css">
    <link rel="stylesheet" href="../../../lib/layui/css/layui_2.5.7.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .none {
            display: none !important;
        }
        
        .layui-table-page select {
            height: 22px;
        }
    </style>
    <style media="print">
        .none {
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">

        <div class="main_box">
            <div class="panel-heading" style="display: flex;justify-content: space-between;align-items: center;">
                <h2>电梯二维码</h2>
                <span class="print_btn" @click='print' style="position: static;height: 40px;line-height: 40px;padding: 0 15px;">打印</span>
            </div>
        </div>
        <div class="layui-form-pane" style="margin-top: 15px;">
            <img :src="bindSrcBillAttachment(ercodeimage)" width="500" height="500" alt="" class="layui-upload-img" onclick="previewImg(this)" style="display: block;margin: 0 auto;">
            <p style="text-align: center">{{projectname}}</p>
            <p style="text-align: center">{{address}}</p>

            <div id="qr_code_print" class="none" media="print">
                <div class="qr_code_print">
                    <div v-for="(item,index) in 4">
                        <img :src="bindSrcBillAttachment(ercodeimage)" alt="">
                        <p>{{projectname}}</p>
                        <p>{{address}}</p>
                    </div>
                </div>
            </div>

        </div>


    </div>
</body>


<script type="text/javascript" src="../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.jqprint-0.3.js"></script>
<script type="text/javascript" src="../../../js/myAjax.js"></script>
<script type="text/javascript" src="../../../js/pub.js"></script>
<script type="text/javascript" src="../../../lib/layui/layui2.5.7.js"></script>
<script type="text/javascript" src="../../../js/vue.min.js"></script>
<!-- <script src="lib/layui/layui.js" charset="utf-8"></script> -->
<script src="../../../js/x-layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function() {
        $ = layui.jquery; //jquery
        laydate = layui.laydate; //日期插件
        lement = layui.element; //面包导航
        laypage = layui.laypage; //分页
        layer = layui.layer; //弹出层
        var form = layui.form;
        okLoading.close($);
    });
</script>



<script>
    var recordId = getQueryVariable("recordId");
    const vm = new Vue({
        el: "#app",
        data: {
            projectname: null,
            address: null,
            ercodeimage: null,

        },
        created() {
            let form = layui.form;
            let request = {
                url: 'maintenance/elevator/detail',
                data: {
                    id: recordId,
                    userId: $userId
                },
                method: "POST"
            }
            sendRequest(request, (res) => {
                this.projectname = res.data.elevator.project.name;
                this.address = res.data.elevator.address;
                this.ercodeimage = res.data.elevator.ercodeimage;


            });

        },
        computed: {},
        methods: {
            bindSrcBillAttachment(value) {
                return $baseUrl +
                    'other/viewUploadFile2?id=' + value;
            },
            print() {
                $("#qr_code_print").jqprint({
                    debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
                    importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
                    printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
                    operaSupport: true //表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
                });
            }
        },


    });
</script>
<script>
    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [500 + 'px', 550 + 'px'], // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function() {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>

</html>